<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-14 11:09:59
 * @LastEditTime: 2019-08-14 17:22:42
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<script type="text/javascript" src="../../script/jquery.js"></script>
	<script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/vant.min.js"></script>
	<script type="text/javascript" src="../../script/fastclick.js"></script>
	<script type="text/javascript" src="../../script/base.js"></script>
	<style type="text/css">
		.van-search {
			padding: 6px 0;
			border-bottom: 1px solid #ebedf0;
		}

		.van-search__action {
			color: #cd1b21;
			font-size: 13px;
			font-weight: 700;
		}

		.result {
			position: absolute;
			left: 0;
			top: 47px;
			bottom: 0;
			width: 100%;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="init-full">
			<van-nav-bar class="head" title="蓝牙连接" left-arrow @click-left="onClickLeft"></van-nav-bar>
			<div class="body-no-bottom">
				<div class="content">
					<div>
						<form action="">
							<van-search v-model="bindDevice" :left-icon="false" readonly placeholder="请选择蓝牙设备"
								show-action>
								<div slot="label">绑定设备</div>
								<div slot="action" @click="searchBluetoothArray">搜索</div>
							</van-search>
						</form>
					</div>
					<div class="result">
						<div>
							<van-cell v-for="row in bluetoothArray" :value="row.name" clickable @click="selectRow(row)">
							</van-cell>
						</div>
					</div>
				</div>
				<van-loading v-if="showLoading" />
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();
		var printModule = api.require('posPrinter');
		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				bindDevice: '',
				bluetoothArray: []
			},
			created: function () {
				// this.getSearchList();
				if (window.localStorage.getItem('printDevice')) {
					var device = JSON.parse(window.localStorage.getItem('printDevice'));
					this.bindDevice = device.name;
				}

			},
			methods: {
				searchBluetoothArray() {
					var that = this;
					that.showLoading = true;
					var param = {
						'status': 'all'
					};
					printModule.getBluetoothPrinters(param, function (ret, err) {
						that.showLoading = false;
						if (ret) {
							var scanList = [];
							for (var i in ret) {
								var x = 0;
								for (var j in scanList) {
									if (ret[i].name && ret[i].name == scanList[j].name) {
										x = 1;
									}
								}
								if (x == 0 && ret[i].name) {
									scanList.push(ret[i])
								}
							}
							that.bluetoothArray = scanList;
						}
					});
				},
				selectRow(row) {
					var that = this;
					var address = row.address;
					that.showLoading = true;
					if (api.systemType == 'android') {
						printModule.createBondToPrinter({
							address: address
						}, function (ret, err) {
							that.showLoading = false;
							if (ret && ret.result == "ok") {
								layer.open({
									content: '设备绑定成功',
									skin: 'msg',
									time: 2
								});
								window.localStorage.setItem('printDevice', JSON.stringify(row));
								that.bindDevice = row.name;
							} else {
								layer.open({
									content: '连接失败',
									skin: 'msg',
									time: 2
								});
							}
						});
					} else {
						layer.open({
							content: '设备绑定成功',
							skin: 'msg',
							time: 2
						});
						that.showLoading = false;
						window.localStorage.setItem('printDevice', JSON.stringify(row));
						that.bindDevice = row.name;
					}
				},
				onClickLeft() {
					api.closeWin();
				}
			}
		})
	};
</script>

</html>